<template>
  <div id="app">
    <!-- component 动态组件 -->
    <!-- 动画组件transition -->
    <!-- 缓存组件  keep-alive -->
    <component :is="coms[gaoliang]"></component>
    <div class="space"></div>
    <div class="tabbar">
      <!-- <Home></Home>
      <Order></Order>
      <Mine></Mine> -->
      <span :class="{active:gaoliang==index}" @click="gaoliang=index" v-for="(item,index) in btns" :key="index">{{item}}</span>
    </div>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Home from './components/Home.vue'
import Order from './components/Order.vue'
import Mine from './components/Mine.vue'
import Bao from './components/Bao.vue'

export default {
  data() {
    return {
      gaoliang: 0,
      btns: ['首页', '爆爆团','订单', '我的'],
      coms:['Home','Bao','Order','Mine']
   }
  },
  components: {
    Home,
    Bao,
    Order,
    Mine,
   
  },
}
</script>

<style lang="scss">
#app {
  padding: 0;
  margin: 0;
}
.tabbar{
 
    display: flex;
    justify-content: space-around;
    align-content: center;
    padding: 10px 0;
    position: fixed;
    bottom:15px;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    background-color: #ccc;
}
.active{
  color: red;
}
.space{
  width: 100%;
  height: 40px;
}
</style>
